<template>
<div>
  <Header></Header>
 <div id="line" style="padding-top: 10px">
    <div class="top" style="margin: 0 auto">
      <div class="top-left">
        <img src="../assets/shanshui/ly-row1-bg.png" alt="" />
      </div>
      <div class="top-right">
        <h2>玩转本溪 精品线路推荐</h2>
      </div>
    </div>
    <div class="line-list">
      <ul>
        <!--  -->
        <li v-for="(item, index) in lineList" :key="index">
          <div>
            <img :src="item.line_img" alt="" />
            <p>{{item.line_journey}}</p>
            <p>{{ item.line_name }}</p>
            <div class="bottom">
              <span>￥{{ item.line_price }}起</span>
              <button @click="$router.push(`/order/${item.line_id}`)">立即购买</button>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <Footer></Footer>
</div>
 
</template>

<script>
import { getLineListAPI } from '@/api'
import Header from '../components/MyHeader.vue'
import Footer from '../components/MyFooter.vue'
export default {
  components:{
    Header,Footer
  },
  mounted() {
    // 获取线路列表数据
    this.getLineList();
  },
  data() {
    return {
      lineList: [],
    };
  },
  methods: {
    async getLineList() {
      let params = { page: 1, pagesize: 15 };
      const res = await getLineListAPI(params)
      console.log('线路列表', res.data.data);
      this.lineList = res.data.data
    },
  },
};
</script>

<style scoped src="../assets/css/line.css"></style>

<style lang="scss" scoped>
</style>